<template>
  <div class="invite">
    <Header></Header>
    <div class="banner">
      <img src="../../assets/images/invite_banner.jpg" alt="">
    </div>
    <div class="w">
      <div class="invite-content">
        <div class="content-top">
          <p class="invite-title">{{$t('invite.title')}}</p>
          <div class="step">
            <div class="step-item">
              <div class="index">1</div>
              <div class="text">{{$t('invite.stept_first')}}</div>
            </div>
            <i class="step-line"></i>
            <div class="step-item">
              <div class="index">2</div>
              <div class="text">{{$t('invite.stept_two')}}</div>
            </div>
            <i class="step-line"></i>
            <div class="step-item">
              <div class="index">3</div>
              <div class="text">{{$t('invite.stept_three')}}</div>
            </div>
            <i class="step-line"></i>
            <div class="step-item">
              <div class="index">4</div>
              <div class="text">{{$t('invite.stept_four')}}</div>
            </div>
          </div>
        </div>
        <div class="code-box">
          <div class="code-img" v-loading="invite_loading">
            <img :src="inviteData.grcode" alt="">
          </div>
          <div class="text">
            <div class="left">
              <p>
                <span class="title">{{$t('invite.rewards')}}&ensp;</span>
                <spinner v-if="invite_loading" />
                <span v-else class="value">{{inviteData.tj_rate}}%</span>
                <i class="icon iconfont icon-edit pointer" :class="{disabled: invite_loading || !canSetRate}" @click="setDefaultRateHandler"></i>
              </p>
              <p>
                <span class="title">{{$t('invite.tj_rate')}}&ensp;</span>
                <spinner v-if="invite_loading" />
                <span v-else class="value">{{(1-inviteData.tj_rate).toFixed(1)}}%</span>
              </p>
              <p>
                <span class="title">{{$t('invite.invite_url')}}</span>
              </p>
              <div class="copy-box clearfix">
                <spinner v-if="invite_loading" />
                <div v-else class="input-box fl">
                  <input type="text" readonly :value="inviteData.invite_url">
                </div>
                <button type="button" class="fr" @click="handleCopy(inviteData.invite_url,$event)" :disabled="invite_loading">{{$t('invite.copy_url')}}</button>
              </div>
            </div>
            <div class="right">
              <p>
                <span class="title">{{$t('invite.inviteCount')}}&ensp;</span>
                <spinner v-if="invite_loading" />
                <template v-else>
                  <cu class="value" :val="inviteData.count | num" :decimals="0"></cu>
                  <span class="value">{{$t('subaccount.ove')}}</span>
                </template>
              </p>
              <p>
                <span class="title">{{$t('invite.total_earn')}}&ensp;</span>
                <spinner v-if="invite_loading" />
                <template v-else>
                  <cu class="value" :val="inviteData.earn | num" :decimals="8"></cu>
                  <span class="value">BTC</span>
                </template>
              </p>
              <p>&nbsp;</p>
              <div class="link-box clearfix">
                <router-link class="fr" to="wallet">{{$t('invite.to_wallet')}}</router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="content-bottom clearfix">
          <div class="item fl">
            <h3>{{$t('invite.invite_friend')}}</h3>
            <div class="table-box">
              <div class="box-title">
                <span class="title">{{$t('invite.invite_info')}}</span>
              </div>
              <div class="box-content" v-loading="inviteFriendsData.loading">
                <table>
                  <thead>
                    <tr>
                      <th>{{$t('invite.invited_account')}}</th>
                      <th class="pointer" @click="sort(0)">{{$t('invite.invite_date')}}
                        <i class="iconfont" :class="[inviteFriendsData.sort === 'asc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
                      </th>
                      <th>{{$t('home.force')}}</th>
                      <th>{{$t('invite.ratio')}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-if="inviteFriendsData.list.length">
                      <tr v-for="(v,k) in inviteFriendsData.list" :key="k">
                        <td>
                          <div class="td-cell">{{v.name}}</div>
                        </td>
                        <td>
                          <div class="td-cell">
                            <p>{{v.created_at.split(' ')[0]}}</p>
                            <p>{{v.created_at.split(' ')[1]}}</p>
                          </div>
                        </td>
                        <td>
                          <div class="td-cell">{{v.share}}</div>
                        </td>
                        <td>
                          <div class="td-cell set-td">
                            <div class="left">
                              <p>{{$t('invite.reward')}}：
                                <span class="jl">{{v.jiangli}}%</span>
                              </p>
                              <p>{{$t('invite.ratio_num')}}：
                                <span class="rl">{{v.rangli}}%</span>
                              </p>
                            </div>
                            <div class="right" :class="{disabled: invite_loading || !canSetRate}" @click="setRate(v)">
                              <i class="icon iconfont icon-edit"></i>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <tr v-else>
                      <td colspan="4">
                        <div class="td-cell tc">{{$t('unit.no_data')}}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <pagination :disabled="inviteFriendsData.loading" :page="inviteFriendsData.page" layout="total, prev, pager, next" :totalCount="inviteFriendsData.total_count" :currentChange="inviteFriends" />
          </div>
          <div class="item fr">
            <h3>{{$t('invite.my_reward')}}</h3>
            <div class="table-box">
              <div class="box-title clearfix">
                <span class="title fl">{{$t('invite.reward_history')}}</span>
              </div>
              <div class="box-content" v-loading="inviteProfitData.loading">
                <table class="td-p15">
                  <thead>
                    <tr>
                      <th  @click="sort(1)" class="pointer">{{$t('income.date')}}<i class="iconfont" :class="[inviteProfitData.sort === 'asc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i></th>
                      <th>{{$t('invite.invited_account')}}</th>
                      <th>{{$t('invite.subaccount')}}</th>
                      <th>{{$t('invite.get_earn')}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-if="inviteProfitData.list.length">
                      <tr v-for="(v,k) in inviteProfitData.list" :key="k">
                        <td>
                          <div class="td-cell">
                            {{v.format_day}}
                          </div>
                        </td>
                        <td>
                          <div class="td-cell">{{v.name || v.email}}</div>
                        </td>
                        <td>
                          <div class="td-cell">{{v.pname}}</div>
                        </td>
                        <td>
                          <div class="td-cell">{{(v.channel_promote_charge+v.mining_promote_charge) | d8fixed}} BTC</div>
                        </td>
                      </tr>
                    </template>
                    <tr v-else>
                      <td colspan="4">
                        <div class="td-cell tc">{{$t('unit.no_data')}}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <pagination :page="inviteProfitData.page" :pageSize="inviteProfitData.page_size" layout="total, prev, pager, next" :totalCount="inviteProfitData.total_count" :currentChange="inviteProfit"/>
          </div>
        </div>
        <div class="rule">
          <h3>{{$t('invite.active_rules')}}</h3>
          <ul >
            <li>{{$t('invite.rules_info1')}}</li>
            <li>{{$t('invite.rules_info2')}}</li>
            <li>{{$t('invite.rules_info3')}}</li>
            <li>{{$t('invite.rules_info4')}}</li>
            <li>{{$t('invite.rules_info5')}}</li>
          </ul>
        </div>
        <el-dialog width="380px" :visible.sync="showSliderDialog" :before-close="handleClose" :close-on-click-modal="false">
          <div class="setting-dialog">
            <div class="dialog-top clearfix">
              <div class="item fl">
                <p class="name">{{$t('invite.rewards_fan')}}</p>
                <p class="value">{{page_tj_rate}}%</p>
              </div>
              <div class="item fr">
                <p class="name">{{$t('invite.rewards_num')}}</p>
                <p class="value">{{(1-page_tj_rate).toFixed(1)}}%</p>
              </div>
            </div>
            <div class="slider-box">
              <div class="slider-value">0.1</div>
              <div class="rate-slider-box">
                <div class="rate-tip" :style="{left:page_tj_rate*100+'%'}">{{page_tj_rate}}</div>
                <el-slider ref="slider" class="rate-slider" v-model="page_tj_rate" :disabled="setRateLoading" :step="0.1" :min="0" :max="1" :show-tooltip="false" />
              </div>
              <div class="slider-value">1.0</div>
            </div>
            <div class="button-box">
              <button :disabled="setRateLoading || !canSetRate" @click="submitRate">{{setRateLoading? $t('unit.setting') : $t('btn.confirm')}}</button>
            </div>
          </div>
        </el-dialog>
        <el-dialog width="380px" :visible.sync="showSuccessDialog">
          <div class="setting-dialog">
            <div class="dialog-top">
              <p class="success-info">{{$t('invite.appication')}}</p>
            </div>
            <div class="button-box">
              <button @click="showSuccessDialog = false;">{{$t('btn.confirm')}}</button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import {
  invite,
  inviteRate,
  inviteFriends,
  invitePuidRate,
  inviteProfit,
} from '@/api';
import pagination from '@/components/Pagination';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Cu from '@/components/CountUp';
import Spinner from '@/components/Spinner';
import clip from '@/utils/clipboard'; // use clipboard directly
import clipboard from '@/directive/clipboard/clipboard'; // use clipboard by
import { mapGetters } from 'vuex';

export default {
  components: {
    pagination,
    Header,
    Footer,
    Cu,
    Spinner,
  },
  data() {
    return {
      setRateLoading: false,
      showSliderDialog: false,
      showSuccessDialog: false,
      page_tj_rate: 0.8,
      current_id: 'default',
      invite_loading: true,
      inviteData: {
        count: 0,
        earn: '0',
        grcode: '',
        invite_url: '',
        tj_rate: '',
        is_lock_channel_rate: 0,
      },
      inviteFriendsData: {
        page: 1,
        sort: 'desc',
        loading: false,
        total_count: 0,
        list: [],
      },
      inviteProfitData: {
        page: 1,
        sort: 'desc',
        loading: false,
        total_count: 0,
        list: [],
      },
    };
  },
  computed: {
    ...mapGetters(['subCoinType']),
    canSetRate() {
      return this.inviteData.is_lock_channel_rate === 0;
    },
  },
  directives: {
    clipboard,
  },
  created() {
    this.invite();
    this.inviteFriends(1);
    this.inviteProfit(1);
  },
  methods: {
    invite() {
      invite({ coin_type: this.subCoinType })
        .then((res) => {
          if (res.data.status === 1) {
            const data = res.data.data;
            [this.inviteData] = [data];
          } else {
            this.$message.error(this.$t(`api.${res.data.errcode}`));
          }
          this.invite_loading = false;
        })
        .catch(() => {
          this.$message.error(this.$t('error.catchError'));
          this.invite_loading = false;
        });
    },
    inviteFriends(page) {
      if (this.inviteFriendsData.loading) {
        return;
      }
      this.inviteFriendsData.loading = true;
      this.inviteFriendsData.page = page;
      inviteFriends({ page: this.inviteFriendsData.page, sort: this.inviteFriendsData.sort })
        .then((res) => {
          if (res.data.status === 1) {
            const data = res.data.data;
            this.inviteFriendsData.total_count = data.outinfo.count;
            this.inviteFriendsData.list = data.info;
          } else {
            this.$message.error(this.$t(`api.${res.data.errcode}`));
          }
          this.inviteFriendsData.loading = false;
        })
        .catch(() => {
          this.$message.error(this.$t('error.catchError'));
          this.inviteFriendsData.loading = false;
        });
    },
    inviteProfit(page) {
      if (this.inviteProfitData.loading) {
        return;
      }
      this.inviteProfitData.loading = true;
      this.inviteProfitData.page = page;
      inviteProfit({ page: this.inviteProfitData.page, sort: this.inviteProfitData.sort })
        .then((res) => {
          if (res.data.status === 1) {
            const data = res.data.data;
            this.inviteProfitData.total_count = data.outinfo;
            this.inviteProfitData.list = data.info;
          } else {
            this.$message.error(this.$t(`api.${res.data.errcode}`));
          }
          this.inviteProfitData.loading = false;
        })
        .catch(() => {
          this.inviteProfitData.loading = false;
          this.$message.error(this.$t('error.catchError'));
        });
    },
    sort(key) {
      if (key) {
        this.inviteProfitData.sort = this.inviteProfitData.sort === 'asc' ? 'desc' : 'asc';
        this.inviteProfit();
      } else {
        this.inviteFriendsData.sort = this.inviteFriendsData.sort === 'asc' ? 'desc' : 'asc';
        this.inviteFriends();
      }
    },
    handleClose(done) {
      if (!this.setRateLoading) {
        done();
      }
    },
    setRate(item) {
      if (this.invite_loading) {
        return;
      }
      if (!this.canSetRate) {
        this.$message.error(this.$t('api.6133'));
        return;
      }
      this.current_id = item.id;
      this.page_tj_rate = parseFloat(item.jiangli);
      this.showSliderDialog = true;
    },
    setDefaultRateHandler() {
      if (this.invite_loading) {
        return;
      }
      if (!this.canSetRate) {
        this.$message.error(this.$t('api.6133'));
        return;
      }
      this.current_id = 'default';
      this.page_tj_rate = parseFloat(this.inviteData.tj_rate);
      this.showSliderDialog = true;
    },
    submitRate() {
      if (this.setRateLoading) {
        return;
      }
      this.setRateLoading = true;
      if (this.current_id === 'default') {
        inviteRate({ rate: this.page_tj_rate })
          .then((res) => {
            if (res.data.status === 1) {
              this.inviteData.tj_rate = this.page_tj_rate;
              this.showSuccessDialog = true;
              this.showSliderDialog = false;
            } else {
              this.$message.error(this.$t(`api.${res.data.errcode}`));
            }
            this.setRateLoading = false;
          })
          .catch(() => {
            this.$message.error(this.$t('error.catchError'));
            this.setRateLoading = false;
          });
      } else {
        invitePuidRate({ puid: this.current_id, rate: this.page_tj_rate })
          .then((res) => {
            if (res.data.status === 1) {
              this.inviteFriends(this.inviteFriendsData.page);
              this.showSuccessDialog = true;
              this.showSliderDialog = false;
            } else {
              this.$message.error(this.$t(`api.${res.data.errcode}`));
            }
            this.setRateLoading = false;
          })
          .catch(() => {
            this.$message.error(this.$t('error.catchError'));
            this.setRateLoading = false;
          });
      }
    },
    handleCopy(text, event) {
      clip(text, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.invite {
  .banner {
    min-width: 1200px;
  }
  .banner img {
    width: 100%;
    display: block;
  }
  .invite-content {
    margin-top: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    overflow: hidden;
    padding: 44px 40px;
    .content-top {
      padding-bottom: 40px;
      .invite-title {
        color: #247ba0;
        font-size: 24px;
        line-height: 36px;
        text-align: center;
      }
      .step {
        margin-top: 64px;
        display: flex;
        justify-content: space-between;
        .step-item {
          position: relative;
          width: 220px;
          &:first-of-type {
            .text {
              &::before {
                display: none;
              }
            }
          }
          &:last-of-type {
            width: 330px;
            .text {
              &::after {
                display: none;
              }
            }
          }
          .index {
            position: absolute;
            top: -40px;
            left: 50%;
            margin-left: -10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background-color: #70c1b3;
            font-size: 12px;
            color: #fff;
          }
          .text {
            position: relative;
            height: 50px;
            line-height: 50px;
            background-color: #f9f9f9;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
            border-radius: 25px;
            border: solid 1px #e0e0e0;
            color: #333333;
            font-size: 18px;
            text-align: center;
            &::before,
            &::after {
              content: " ";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              width: 8px;
              height: 2px;
              background-color: #c2c2c4;
            }
            &::before {
              left: -8px;
            }
            &::after {
              right: -8px;
            }
          }
        }
        .step-line {
          margin-top: 24px;
          display: block;
          width: 8px;
          height: 2px;
          background-color: #c2c2c4;
        }
      }
    }
    .code-box {
      border-bottom: 1px solid #eaeaea;
      border-top: 1px solid #eaeaea;
      height: 230px;
      padding: 30px 40px;
      display: flex;
      .code-img {
        margin-right: 15px;
        width: 170px;
        height: 170px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .text {
        flex: 1;
        display: flex;
        .left,
        .right {
          p {
            line-height: 42px;
            font-size: 0;
            .title {
              font-size: 18px;
              color: #333333;
              vertical-align: middle;
            }
            .value {
              font-size: 30px;
              color: #70c1b3;
              vertical-align: middle;
            }
          }
        }
        .left {
          width: 440px;
          p {
            position: relative;
            .icon {
              position: absolute;
              top: 0;
              left: 223px;
              margin-left: 25px;
              font-size: 18px;
              color: #333333;
              &:hover {
                color: #70c1b3;
              }
              &.disabled {
                color: #333333;
                cursor: not-allowed;
              }
            }
          }
          .copy-box {
            .input-box {
              width: 350px;
              border-bottom: 1px solid #cccccc;
              height: 30px;
              padding: 7px 0;
              input {
                outline: none;
                border: none;
                font-size: 14px;
                line-height: 16px;
                width: 100%;
                color: #cccccc;
              }
            }
            button {
              outline: none;
              width: 70px;
              height: 30px;
              border-radius: 3px;
              border: solid 1px #70c1b3;
              background-color: #fff;
              font-size: 12px;
              color: #70c1b3;
              &:disabled {
                cursor: not-allowed;
              }
            }
          }
        }
        .right {
          position: relative;
          flex: 1;
          a {
            display: block;
            width: 70px;
            height: 30px;
            background-color: #70c1b3;
            border-radius: 3px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            &:hover {
              background-color: #8dcdc2;
            }
          }
        }
      }
    }
    .content-bottom {
      padding-bottom: 50px;
      border-bottom: 1px solid #eaeaea;
      .item {
        width: 520px;
        h3 {
          font-size: 24px;
          color: #247ba0;
          margin: 50px 0 30px;
          text-align: center;
        }
        .table-box {
          background-color: #ffffff;
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
          border-radius: 5px;
          // border: solid 1px #e0e0e0;
          overflow: hidden;
          .box-title {
            height: 50px;
            background-color: #f9f9f9;
            box-shadow: inset 0 -1px 0 0 #f2f2f2;
            padding: 10px 20px;
            border: solid 1px #e0e0e0;
            border-bottom: none;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            .title {
              color: #333333;
              font-size: 12px;
              line-height: 30px;
            }
          }
          .box-content {
            table {
              width: 100%;
              &.td-p15 {
                tbody {
                  tr {
                    td {
                      .td-cell {
                        padding: 14px 15px;
                      }
                    }
                  }
                }
              }
              thead {
                tr {
                  border: 1px solid #eaeaea;
                  th {
                    border: none;
                    font-size: 12px;
                    color: #247ba0;
                    padding: 6px 20px;
                    line-height: 18px;
                  }
                }
              }
              tbody {
                tr {
                  border: 1px solid #eaeaea;
                  &:nth-of-type(odd) {
                    background-color: #fbfbfb;
                  }
                  td {
                    border: none;
                    padding: 0;
                    .td-cell {
                      padding: 14px 20px;
                      color: #333333;
                      line-height: 16px;
                      font-size: 12px;
                      white-space: nowrap;
                      &.set-td {
                        display: flex;
                        .left {
                          .jl {
                            color: #70c1b3;
                          }
                          .rl {
                            color: #eb547c;
                          }
                        }
                        .right {
                          cursor: pointer;
                          &.disabled{
                            cursor:not-allowed;
                            &:hover {
                              .icon {
                                color: #333;
                              }
                            }
                          }
                          line-height: 32px;
                          padding-left: 20px;
                          &:hover {
                            .icon {
                              color: #247ba0;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .rule {
      width: 744px;
      margin: 0 auto;
      h3 {
        margin: 44px 0 14px;
        font-size: 24px;
        line-height: 36px;
        color: #247ba0;
        text-align: center;
      }
      ul {
        li {
          font-size: 17px;
          color: #333333;
          line-height: 36px;
        }
      }
    }
    .setting-dialog {
      .dialog-top {
        width: 260px;
        margin: 0 auto 23px;
        .item {
          width: 50%;
          text-align: center;
          color: #70c1b3;
          &:last-of-type {
            color: #eb547c;
          }
          .name {
            font-size: 18px;
          }
          .value {
            font-size: 30px;
            line-height: 45px;
          }
        }
        .success-info {
          color: #70c1b3;
          font-size: 18px;
          line-height: 30px;
        }
      }
      .slider-box {
        display: flex;
        .rate-slider-box {
          position: relative;
          flex: 1;
          margin: 0 10px;
          .rate-tip {
            position: absolute;
            top: -14px;
            transform: translateX(-50%);
            width: 40px;
            height: 20px;
            line-height: 20px;
            background-color: #70c1b3;
            border-radius: 2px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            &::after {
              content: " ";
              position: absolute;
              bottom: -4px;
              left: 50%;
              transform: translateX(-50%);
              border-top: 4px solid #70c1b3;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
            }
          }
        }
        .slider-value {
          line-height: 42px;
        }
      }
      .button-box {
        text-align: center;
        margin-top: 34px;
        button {
          outline: none;
          border: none;
          width: 285px;
          height: 40px;
          background-color: #70c1b3;
          border-radius: 20px;
          font-size: 15px;
          color: #fff;
          &:disabled {
            cursor: not-allowed;
            background-color: #8dcdc2;
          }
          &:hover {
            background-color: #8dcdc2;
          }
        }
      }
    }
  }
  /deep/ .el-dialog__body{
    padding: 20px 20px 50px;
    .setting-dialog{
      .el-slider__runway{
        height: 10px;
        background-color: #e6e6e6;
        border-radius: 4px;
        .el-slider__bar{
          background-color: #b2dbbf;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          height: 10px;
        }
        .el-slider__button-wrapper{
          top: -13px;
          .el-slider__button{
            width: 14px;
            height: 14px;
            background-color: #70c1b3;
          }
        }
      }
    }
  }
}
</style>
